<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-24 20:57:54
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-26 17:30:21
 * @Description:
 -->

<template>
  <div class="listTemplate">
    <mt-header title="审批工作" class="header">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <i slot="right" @click="open = true" class="iconfont iconshaixuan4 active-color right-icon"></i>
    </mt-header>
    <section class="t-body">

      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section v-for="(i, index) in listData" :key="index">
              <mu-paper class="demo-paper" :z-depth="2">
                <section class="box" @click="pushToDetail(i)">
                  <mu-flex justify-content="between" align-items="center">
                    <custom-label :title="handleProblemLevel(i.problemLevel)" bgColor="orange"/>
                    <custom-label :title="handleProblemStatus(i.applyType)" bgColor="red"/>
                  </mu-flex>
                  <separator/>
                  <p class="line-list textdot">
                    <span class="">项目名称：{{i.orgName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>问题描述：{{i.checkProblems}}</span>
                  </p>
                  <p class="line-list flex_b">
                    <span>申请人：
                      <mu-avatar color="primary" size="25">{{splitFirstLetter(i.applyUserName)}}</mu-avatar>
                      {{i.applyUserName}}
                    </span>
                  </p>
                  <p class="line-list">
                    <span>申请时间：{{i.applyTime}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>备注：{{i.applyDesc}}</span>
                  </p>
                  <separator/>
                  <div style="display: flex; flex-direction: row;">
                    <mt-button type="default" size="large">拒绝</mt-button>
                    <span style="width: 0.1rem;"></span>
                    <mt-button type="primary" size="large">同意</mt-button>
                  </div>
                </section>
              </mu-paper>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
    </section>
    <!-- 筛选 -->
    <mu-bottom-sheet :open.sync="open">
      <mu-list @item-click="closeBottomSheet">
        <mu-sub-header>筛选条件</mu-sub-header>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span>检查结果：</span>
            <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
              <mu-option v-for="(option,index) in options" :key="index" :label="option" :value="option"></mu-option>
            </mu-select>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;">
            <span>问题等级：</span>
            <mu-select v-model="form.select" style="padding-bottom:0;margin-bottom:0;">
              <mu-option v-for="(option,index) in options" :key="index" :label="option" :value="option"></mu-option>
            </mu-select>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <div class="flex_b" style="width:100%;white-space:nowrap;">
            <span>开始时间：</span>
            <mu-date-input icon="today" v-model="form.startTime" container="bottomSheet" label-float full-width></mu-date-input>
          </div>
        </mu-list-item>
        <mu-list-item button>
          <mu-button full-width round color="success" @click="open = false">确认</mu-button>
        </mu-list-item>

      </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script>
import apis from '../../../services/apis.js'
import { Separator, CustomLabel } from '../../../components/widgets'
export default {
  name: 'mainPage',
  components: {
    Separator,
    CustomLabel
  },
  data () {
    return {
      num: 20,
      refreshing: false,
      loading: false,
      text: 'List',
      open: false,
      options: ['Option 1', 'Option 2'],
      form: {
        select: '',
        startTime: ''
      },
      // 新增
      listData: []
    }
  },
  mounted () {
    this.loadApprovalDataList()
  },
  created () {

  },
  methods: {
    handleProblemLevel (level) {
      let levelText = null;
      switch (level) {
        case 0:
          levelText = '一般问题';
          break
        case 1:
          levelText = '较大问题';
          break
        case 2:
          levelText = '重大问题';
          break
        default:
          levelText = '字段非法';
      }
      return levelText;
    },
    handleProblemStatus (status) {
      let statusText = null
      switch (status) {
        case "0":
          statusText = '延期处理';
          break
        case "1":
          statusText = '隐患闭合';
          break
        default:
          statusText = '字段非法';
      }
      return statusText;
    },
    splitFirstLetter (letters) {
      if (letters !== null && letters !== undefined) {
        return letters.substr(0, 1)
      }
      return '无'
    },
    loadApprovalDataList () {
      this.$A.Go('get', apis.approval_list)
        .then(res => {
          const {
            msg,
            body
          } = res
          console.log('审批工作：', body)
          this.listData = body.rows
          this.$A.MS(msg)
        })
        .catch(err => {
          this.$A.MS(err)
        })
    },
    closeBottomSheet (isnot) {
      this.open = isnot
    },
    refresh () {
      this.refreshing = true
      this.$refs.container.scrollTop = 0
      setTimeout(() => {
        this.refreshing = false
        this.text = this.text === 'List' ? 'Menu' : 'List'
        this.num = 20
      }, 2000)
    },
    load () {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.num += 20
      }, 2000)
    },
    pushToDetail (query) {
      this.$router.push({
        path: '/myapprovalDetail',
        query
      });
    }
  }
}
</script>
<style lang="scss" scoped>
  .listTemplate {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;

    .t-header {
      height: 0.45rem;
      width: 100%;
      color: #3D3D3D;
      box-sizing: border-box;
      padding: 5px 8px;
      position: relative;
      background-color: #fff;
      // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .t-close {
        min-width: 28px;
        border-radius: 50%;
      }

      .t-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.19rem;
        font-weight: 500;
      }

      .t-right-icon {
        font-size: 0.2rem;
      }
    }

    .t-body {
      height: calc(100% - 0.45rem);
      width: 100%;
      overflow: auto;
      background-color: #F8F8F8;
    }

    .t-body+.t-footer {
      height: 0.45rem;
      width: 100%;
    }

    .t-footer+.t-body {
      height: calc(100% - 0.9rem);
    }

    // 自定义样式
    .areaTitle {
      margin-top: 5px;
      font-size: 0.19rem;
      padding: 10px 20px;
    }

    .box {
      padding: 10px;
      margin-bottom: 5px;
    }

    .line-list {
      margin: 5px 0;
      font-size: 0.15rem;
    }

    .textdot {
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .flex_b {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
<style lang="scss">
  .t-close {
    .mu-button-wrapper {
      padding: 0 !important;
    }
  }
</style>
